* {padding: 0;margin: 0;}
html,body { height:100%; }

div.test { 
    width: 1rem /* 100/100 */; 
    height: 1rem /* 100/100 */; 
    background: red; 
}

// body
body { 
    display: flex;
    flex-direction: column;
    background:#000d4a url(../imgs/bg.jpeg) center top; 
}

// header
header { 
    width: 100%;
    height: 1.05rem /* 105/100 */; 
    line-height: 1.05rem /* 105/100 */;
    background: url(../imgs/head_bg.png) no-repeat center center; 
    position: relative; 
    text-align: center;
    color: #fff;

    // h1
    h1 {
        font-size: .42rem /* 42/100 */;
    }

    // span
    span {
        position: absolute;
        right: .2rem /* 20/100 */;
        top: -0.1rem;
        font-size: .24rem /* 24/100 */;
    }
}

// main
.main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin: .2rem /* 20/100 */;
    // background: red;

    // column盒模型
    .column {
        width: 25%;
        height: 100%;
        // background: green;

        // .column:nth-of-type(2) 相当关于 &:nth-of-type(2)
        &:nth-of-type(2) {
            width: 50%;
            height: 100%;
            margin: 0 .2rem /* 10/100 */;
            // background: blue;
        }

        // box盒模型
        .box {
            width: 100%;
            background: rgba(0, 0, 0, 0.2);
            margin-bottom: .15rem /* 15/100 */;
        }

        .alltitle {
            font-size: 0.18rem /* 18/100 */;
            color: #fff;
            position: relative;
            padding-left: 0.12rem;
            margin-bottom: 0.1rem;
        }
        .alltitle::before {
            width: 0.05rem;
            height: 0.2rem;
            top: 0.02rem /* 12/100 */;
            position: absolute;
            content: "";
            background: #49bcf7;
            border-radius: 0.2rem;
            left: 0rem /* 42/100 */;
        }

        .box-center1-left {
            float: left;
        }
        .box-center1-right {
            float: right;
            span {
                padding-top: .2rem /* 20/100 */;
                display: block;
                text-align: center;
                color: red;
                font-size: .16rem /* 16/100 */;
            }
        }
    }
}


// 滚动  left2
.wrap {
    height: 82%;
    overflow: hidden;
}

.wrap li {
line-height: .4rem /* 40/100 */;
height: .4rem /* 40/100 */;
}

.wrap li p,
.wraptit {
font-size: 0;
}

.wrap li span,
.wraptit span {
display: inline-block;
font-size: .18rem /* 18/100 */;
color: rgba(255, 255, 255, 0.6);
}

.wraptit {
border-bottom: .01rem /* 1/100 */ solid rgba(255, 255, 255, 0.2);
padding: 0 0 .1rem /* 10/100 */ 0;
margin-bottom: .1rem /* 10/100 */;
}

.wrap li span:nth-child(1),
.wraptit span:nth-child(1) {
width: 30%;
}

.wrap li span:nth-child(2),
.wraptit span:nth-child(2) {
width: 20%;
}

.wrap li span:nth-child(3),
.wraptit span:nth-child(3) {
width: 20%;
}

.wrap li span:nth-child(4),
.wraptit span:nth-child(4) {
width: 30%;
}


// table1
.table1 th {
    border-bottom: .01rem /* 1/100 */ solid rgba(255, 255, 255, 0.2);
    font-size: .16rem /* 16/100 */;
    color: rgba(255, 255, 255, 0.6);
    font-weight: normal;
    padding: 0 0 0.08rem /* 8/100 */ 0;
}

.table1 td {
font-size: .16rem /* 16/100 */;
color: rgba(255, 255, 255, 0.4);
padding: 0.08rem /* 8/100 */ 0 0 0;
}

.table1 span {
width: .24rem /* 24/100 */;
height: .24rem /* 24/100 */;
border-radius: .03rem /* 3/100 */;
display: block;
background: #878787;
color: #fff;
line-height: .24rem /* 24/100 */;
text-align: center;
}

.table1 tr:nth-child(2) span {
background: #ed405d;
}

.table1 tr:nth-child(3) span {
background: #f78c44;
}

.table1 tr:nth-child(4) span {
background: #49bcf7;
}